Jump to content
  • 0

Футер я прижал, появился вопрос

html_root

Asked by html_root,

 Share

Question

html_root Explorer

html_root

Posted
Posted (edited)

Ребят, я новичок в html изучаю базис.

В общем у меня макет header content footer

Footer я прижал к низу браузера. А как можно растянуть блок div с контентом от шапки до подвала?

Макет резиновый по вертикали.

Edited by html_root
Link to comment
Share on other sites
  • Answers 87
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

87 answers to this question

Recommended Posts

  • 0
shvv Explorer

shvv

Posted
Posted
Ребят, я новичок в html изучаю базис.

В общем у меня макет header content footer

Footer я прижал к низу браузера. А как можно растянуть блок div с контентом от шапки до подвала?

Макет резиновый по вертикали.

Сейчас подобный вопрос обсуждается в теме: http://forum.htmlbook.ru/index.php?showtopic=17050&hl=

Link to comment
Share on other sites
  • 0
html_root Explorer

html_root

Posted
  • Author
Posted

psywalker спасибо!

Второй день сижу с хитрой разметкой.

Посмотрите плиз вот то что хочу получить Изображение

Без градиентной верхушки и низа сделать легко. А как сделать чтобы сверху и снизу был градиент (рисунок).

Подскажите плиз структуру дивов!

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Тоже самое как тут: http://psywalker.ru/Forum/shadow/Untitled-1.html

Только внизу в подвале Градиент, вверху в шапке тоже, и потом внутрь шапки и подвала ещё по Диву, которые выравниваете по середине и делаете той ширины, которой нужно

Link to comment
Share on other sites
  • 0
html_root Explorer

html_root

Posted
  • Author
Posted

:) засада какая-то

<title>Untitled</title>

<style>

* { margin: 0; padding: 0; border-style: solid; border: 1px;}

html { height: 100%; }

body {

height: auto;

min-height:100%;

min-width: 980px;

height:100%;

position:relative;

background-color: Yellow;

}

.bg_header {

height: 120px;

background-image:url(images/bghead01.png);

position: absolute;

top: 0;

background-repeat: repeat-x;

min-width: 100%;

width: 100%;

}

.bg_content {

margin: 0 auto;

position: relative;

height: 100%;

width: 980px;

background-color: green;

}

.bg_footer {

height: 100px;

background-image:url(images/bgfoot01.png);

position: absolute;

bottom: 0;

background-repeat: repeat-x;

min-width: 100%;

width: 100%;

}

</style>

</head>

<body>

<div class="bg_header">1</div>

<div class="bg_content">2</div>

<div class="bg_footer">3</div>

</body>

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

погоди, ты делаешь ерунду, да и я тебе немного не то сказал, лишний дивов приписал тебе, вобщем смотри, если я правильно понял, вверху и внизу ПОД сайтом(который выровнен по середине), должен идти градиент горизонтальный на всю ширину,а в высоту гдето 100пк, так?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
psywalker да, всё верно!

И на этом градиенте одновременно располагаются шапочка и подвал, шириной 980px. В них будет другая картинка отличная от градиента.

ща сделаем, сходи покури пока :)

а на хтмл и на боди бекграундами никак не разбросать?

нихрена, тогда подвал будет уходить, а фон зависать на 100% высоте, попробуй сам, может я чё путаю

html_root зацени и оставь нас с Михой наедине, мы должны разобрать ситуацию)) :)

http://psywalker.ru/Forum/Column/main3.html

mishka2

Прикинь короче по другому я не смог замутить, может ты сможешь, я щас просто тороплюсь, может из-за этого голова не работает, НО вешал фон вначале на html и body конеш, и почему то он завис на высоте 100%, попробуй ты сделай, получится или нет?

http://psywalker.ru/Forum/Column/main3.html

Edited by psywalker
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Оу май гадэбл! psywalker спасибо большое тебе!

Оставляю вас, но за темой буду следить. Не думал что задачка сложная, а оказывается озадачил :)

Да не за что, мы тут любим по задачкам прикалываться :)

А моё решение мне не понравилось из-за обилия элементов и кода, нужно искать чтото меньшее по объёму и красивее, поэтому ты иногда конеш поглядывай, но я щас уезжаю до вечера, может по дороге что нибудь придумаю, а пока Медведь сделает всем красиво B):)

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Footer at bottom</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	html,body{
		height:100%;
	}
	body{
		margin:0;
		background:url(bg.gif) repeat-x;
	}
	#wrapper{
		min-height:100%;
		height:auto !important;
		height:100%;
		width:900px;
		margin:0 auto;
		background:#f0f;
	}
	#wrapper .wrap{
		width:100%;
		padding:0 0 100px;
		overflow:hidden;
	}
	#footer{
		height:100px;
		margin:-100px 0 0;
		position:relative;
		background:url(bg.gif) repeat-x 0 100%;
	}
	#footer .wrap{
		width:900px;
		margin:0 auto;
		height:100%;
		background:#ff0;
		overflow:hidden;
	}
	-->
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<p>Lorem ipsum dolor sit amet consectetuer nec et urna at rhoncus. Vestibulum Nunc a semper magna porta leo vitae orci Phasellus nibh. Sed semper dolor Aenean feugiat et hac In Morbi faucibus enim. Adipiscing et tincidunt Nam cursus malesuada ac dolor ut laoreet et. Ornare at velit magnis lacus augue tincidunt suscipit vitae volutpat est. In justo Curabitur condimentum.</p>
		<p>Pretium pretium vel turpis mi turpis nisl ac tincidunt Pellentesque quis. Adipiscing faucibus In eu Cras vitae dolor eget tempor at netus. Urna wisi consequat Phasellus nibh laoreet Nullam Nunc nibh fames tincidunt. Sapien tempus et et Vestibulum justo cursus lorem mauris tellus Maecenas. Pellentesque et Pellentesque lobortis ligula Curabitur mauris a sit Nulla vel. Phasellus dis pellentesque morbi mauris lobortis Maecenas iaculis quis.</p>
		<p>Nulla ut turpis velit vel pellentesque Vestibulum nisl lorem fringilla lacus. Vestibulum enim justo malesuada Sed dignissim orci faucibus ac laoreet et. Nibh pellentesque velit vel Phasellus leo massa nunc enim nec lacus. Eu augue risus sagittis lacus semper cursus lacinia Nunc adipiscing Vestibulum. Ut Sed est laoreet sem platea netus non fermentum libero et. </p>
		<p>Vitae orci pretium auctor sapien est facilisi Nam sapien Vivamus habitasse. Sem interdum Pellentesque sit justo Curabitur pellentesque lacus Vivamus ut Nam. Auctor dui Morbi hendrerit feugiat metus pretium urna tincidunt tellus massa. Ac sagittis feugiat Aenean sed et turpis mi interdum leo at. Senectus tortor cursus in condimentum Fusce Donec venenatis malesuada Sed ac. Nullam consequat magna enim cursus volutpat eget laoreet.</p>
	</div>
</div>
<div id="footer">
	<div class="wrap">
		footer
	</div>
</div>
</body>
</html>

Оставляю вас, но за темой буду следить. Не думал что задачка сложная, а оказывается озадачил

На самом деле неозадачил. Это несложно. Просто изза нехватки времени хотел навскидку ответить - неполучилось.

В этом примере есть ограничение - высота футера фиксированна. Высота нижнего градиента ограничивается высотой футера

Edited by mishka2
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

Ответный удар будет не от туда откуда ждешь:

Сделай окно браузера маленьким и посмотри! Куда подевался бг, куда подевался текст футера?

Слишком много релейтивов. Запомни чем больше релейтивов тем нестабильнее верстка, это особо проявляется на сложных страницах с кучей мелких елементов. Поэтому избегай по возможности.

Еще и експрешн прилепил.. Ну ты даешь :)

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Смотри, сделал мин-виф и футер на месте http://psywalker.ru/Forum/Column/main5.html

А вообще ты наверн прав, релативов навалом, и этот экспрешн ещё не в кассу блин.. но каркас стоит..хе-хе.. B)

Ладненько, пока не сдаюсь :)

p.s. - Ты написал, что кудато подевался бг при сужении экрана? Что ты имеешь ввиду?

Edited by psywalker
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

ну ты же поставил минимальную ширину, все поправилось.

Проверяй всегда - делай ширину окна так чтобы появился горизонтальный скролл. Двигай скролл вправо до упора, и смотри на бг блоков. Бывает обрезается бг, если на боди минимальную ширину не поставить.

Вот убери ее в этом примере и проверь - увидишь :)

Избавится от блока враппер можна и в моем примере, а минимальную высоту ставить на боди... ну так как ты и делал.

Но я не поклонник такого, даже незнаю почему. привык с боди по минимальному работать. Ну тоесть бг, фонт, колор. Ну и если надо то высоту

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
ну ты же поставил минимальную ширину, все поправилось.

Проверяй всегда - делай ширину окна так чтобы появился горизонтальный скролл. Двигай скролл вправо до упора, и смотри на бг блоков. Бывает обрезается бг, если на боди минимальную ширину не поставить.

Вот убери ее в этом примере и проверь - увидишь :)

Да,но с мин-виф значит всё в порядке, но всё же обилие релатива и экспрешана не катит, да Мих,нужно искать чтото более приятное, вот у тебя кстати мне нравиться вариант правда B)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
прочти еще раз мое предыдущее сообщение, я его подредактировал

Тоесть ты не любишь ставить на боди минимальную ширину?

Но ведь в этом примере она так и так будет минимальной того размера, который центральный контейнер wrap?

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

нее.. минимальную ширину ставляю конено. Но минимальную высоту - нет

ну блин... я наверное плохо свои мысли высказываю, потому что ты меня непонимаешь.

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
нее.. минимальную ширину ставляю конено. Но минимальную высоту - нет

ну блин... я наверное плохо свои мысли высказываю, потому что ты меня непонимаешь.

Нет, это просто я постоянно туплю, как обычно, тыж меня знаешь медведь :)

А я вот кстати наоборот люблю минимальные высоты, и считаю это более правильным подходом B)

Edited by psywalker
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept